<template>

  <div>
    <div class="phototop load-fade">
      <h1>相册</h1>
    </div>
    <div>
      <el-col :md="8" :sm="24" v-for="(item, index) in photo" :key="index">
        <div class="imgcard">
          <div style="margin: 0.5rem auto;width: 95%;">
            <div class="img">
              <div class="demo-image__preview ">
                <el-image style="width: 100%; height: 100%" :src="item.url" :preview-src-list="urls" id="image" class="load-fade" >
                </el-image>
              </div>
            </div>
            <p>{{ item.context }}</p>
            <p>{{ item.createTime }}</p>
            <p><span v-for="(span, index) in item.span" :key="index"
                style="background-color: aquamarine;border-radius: 10px;margin: 5px;">{{ span }}</span></p>
          </div>
        </div>
      </el-col>
    </div>
  </div>
</template>

<script>
import { getPhoto,getImgList } from "../api/photo.js"
export default {

  data() {
    return {
      photo: [],
      urls:[]
    };
  },
  methods: {

  },
  components: {

  },
  created() {
    getPhoto().then(res => {
      this.photo = res;
    });
    getImgList().then(res=>{
      this.urls=res
    })
  },
};
</script>
<style scoped>
.phototop {
  margin: 5rem auto;
  width: 80%;
  height: 15rem;
  background-image: url("../../static/img/aven.gif");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 25px;
}

.phototop h1 {
  text-align: center;
  line-height: 15rem;
  font-size: 3rem;
  color: #fff;
}

.imgcard {
  margin-top: 5rem;
  border-radius: 20px;
  background-color: #fff;
  height: 35rem;
  overflow: hidden;
}

.img {
  width: 100% ;
  height: 24rem;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 10px 10px #848484;
}

img {
  border-radius: 20px 20px 0 0;
  margin: 0 auto;
  transition: all 1.5s;

}

p:nth-child(2) {
  font-size: 2rem;
  line-height: 2.5em;
  color: #000;
  font-style: bold;
  font-family: 'photoFont';
}

p:nth-child(3) {
  line-height: 2em;
  color: #848484;
  font-family: 'photoFont';
}

p:nth-child(4) {
  font-size: 1.5rem;
  line-height: 2em;
  color: #000;
  font-style: bold;
  font-family: 'photoFont';
}

.el-image:hover {
  scale: 1.3;
  transition: all 0.5s ease-out;
}

.el-image {
  scale: 1;
  transition: all 0.5s ease-out;
}
</style>
